.viewer-wrap{
  width:100%;
  max-height: 100vh;
}

.viewer{
  // moved to js
  // font-size: 72px;
  // font-weight: bold;
  // background-color: #111;
  height:80vh;
  min-height: 340px;
  position: relative;
  .pre-wrap{
    opacity: 1;
    height: 100%;
    &.mirror-h{
      transform: rotateY(180deg);
    }
    &.mirror-v{
      transform: rotateX(180deg);
    }
    &.mirror-hv{
      transform:rotateX(180deg) rotateY(180deg);
    }
  }
  .text{
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
    font-family: inherit;
    transition: transform .39s linear;
  }
  &:fullscreen{
    .text{
      height: auto;
    }
    .btn{
      display:inline-block;
    }
    .clear{
      display: none;
    }
  }

  .btn{
    position: absolute;
    right: 2%;
    &:nth-of-type(6) {
      bottom: 80px;
    }
    &:nth-of-type(5) {
      bottom: 140px;
    }
    &:nth-of-type(4) {
      bottom: 200px;
    }
    &:nth-of-type(3) {
      bottom: 260px;
    }
    &:nth-of-type(2) {
      bottom: 320px;
    }
    display: none;
    border-radius: 1000px;
    cursor: pointer;
    background-color: #777;
    transition: all 0.5s;
    @media(hover: hover) and (pointer: fine){
      &:hover{
        opacity: 1;
        transform:scale(1.5);
      }
    }
    font-size: 20px;
    padding: 6px 10px;
    text-align: center;
    box-sizing: border-box;
    opacity: .5;
    @media all and (max-width: 800px){
      font-size: 12px;
      padding: 4px 6px;
      right: 2px;
      &:nth-of-type(6) {
        bottom: 80px;
      }
      &:nth-of-type(5) {
        bottom: 130px;
      }
      &:nth-of-type(4) {
        bottom: 180px;
      }
      &:nth-of-type(3) {
        bottom: 230px;
      }
      &:nth-of-type(2) {
        bottom: 280px;
      }
    }
  }
  .exit-full{
    bottom: 20px;
    @media all and (max-width: 800px){
      bottom: 5px;
    }
    display: inline-block;
  }
  .clear{
    display: inline-block;
    left: 2%;
    right:unset;
    bottom: 20px;
    @media all and (max-width: 800px){
      bottom: 5px;
    }
  }
}
.status{
  font-size: 80%;
}